var x = 200;
var y = 200;
var angle = 0;
var angle1 = 0;
var angle2 = 0;

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
}

function draw() {
  background(0);
  translate(200, 200);
  rotate(-90);
  noFill();

  push();
  stroke(255, 0, 92); //"#ff00ff"
  strokeWeight(6.5);
  arc(0, 0, 220, 220, 0, angle);
  pop();

  push();
  stroke(104, 255, 0);
  strokeWeight(6.5);
  arc(0, 0, 200, 200, 0, angle1);
  pop();

  push();
  stroke(0, 111, 255);
  strokeWeight(6.5);
  if(angle2 > (2 * 360)) {
    arc(0, 0, 180, 180, 0, angle2 - (2 * 360));
  } else if(angle2 > 360) {
    arc(0, 0, 180, 180, 0, angle2 - 360);
  } else {
    arc(0, 0, 180, 180, 0, angle2);
  }
  pop();

  //HOUR
  push();
  stroke(0, 111, 255);
  rotate(angle2);
  if(angle2 > 360) {
    angle2 = 0;
  }
  strokeWeight(6);
  line(0, 0, 40, 0);
  ellipse(90, 0, 5, 5);
  angle2 = ((720 * hour()) / 24);
  pop();
  //MINUTES
  push();
  stroke(104, 255, 0);
  rotate(angle1);
  if(angle1 > 360) {
    angle1 = 0;
  }
  strokeWeight(6);
  line(0, 0, 50, 0);
  ellipse(100, 0, 5, 5);
  angle1 = (360 * minute()) / 60;
  pop();
  //SECONDS
  push();
  stroke(255, 0, 92);
  rotate(angle);
  if(angle > 360) {
    angle = 0;
  }
  strokeWeight(6);
  line(0, 0, 70, 0);
  ellipse(110, 0, 5, 5);
  angle = (360 * second()) / 60;
  pop();
}